<template>
  <view class="reset-pay">
    <view class="button-box">
      <!-- <view class="button-pay">立即支付(¥29.90)</view> -->
      <!-- <view class="button-reset">修改信息</view> -->
    </view>
    <u-modal
      v-model="show"
      :content="content"
      show-cancel-button
      :confirm-text="`立即支付(¥${totalPrice})`"
      cancel-text="修改信息"
      @confirm="handlePay"
      @cancel="updatedForm"
    ></u-modal>
  </view>
</template>

<script>
import { mapState, mapActions } from "vuex";
export default {
  data() {
    return {
      orderId: "",
      show: true,
      content: "只差最后一步，马上就可以获得报告啦",
    };
  },
  onLoad: function(option) {
    this.orderId = option.orderId;
  },
  computed: {
    ...mapState("Public", ["totalPrice"]),
  },
  methods: {
    ...mapActions("order", ["goPrePay"]),
    ...mapActions("Public", ["putPint"]),
    handlePay() {
      this.putPint();
      this.goPrePay(this.orderId);
    },
    updatedForm() {
      uni.redirectTo({
        url: `/pages/checkCredit/infoForm`,
        success: function(res) {
          console.log("res", res);
        },
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.reset-pay {
  position: relative;
  width: 100%;
  height: calc(100vh);
  background-image: url("https://cdn.joker88.cn/WX20211027-121553%40eee.png");
  background-size: 100%, 100%;
}

.button-box {
  position: absolute;
  bottom: 100rpx;
  left: 50%;
  transform: translateX(-50%);
}

.button-pay {
  width: 600rpx;
  height: 90rpx;
  line-height: 90rpx;
  text-align: center;
  color: white;
  // background-color: red;
  background-image: linear-gradient(
    to right,
    rgb(245, 132, 7),
    rgb(254, 67, 22)
  );
  border-radius: $uni-border-radius-sc;
  animation: changeShape 0.5s linear alternate infinite;
}

@keyframes changeShape {
  from {
    transform: scale(0.9);
  }
  to {
    transform: scale(1);
  }
}
</style>
